<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <title>Synchronize My Host</title>
</head>
<body>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <div class="row clearfix">
        <div class="col-md-3 column">
        </div>
        <div class="col-md-6 column">
          <h3>
            Host 每日同步器
          </h3>
          <h5>为你生成最新的 hosts 文件</h5>
          <br/>
          <div class="tabbable" id="tabs-776167">
            <ul class="nav nav-tabs">
              <li class="active">
                <a href="#panel-658574" data-toggle="tab">配置</a>
              </li>
              <li>
                <a href="#panel-250047" data-toggle="tab">食用方法</a>
              </li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="panel-658574">
                <br/>
                <form id="form" role="form">
                  <div class="form-group">
                    <label for="configName">为你的配置起个独一无二的名字</label>
                    <input type="text" class="form-control" id="configName" placeholder="配置名用于获得同步后的 Host 文件" required/>
                  </div>
                  <div class="form-group">
                    <label for="staticPart">不想同步的部分 (选填, 在 host 文件中截取, 以行为单位)</label>
                    <textarea id="staticPart" class="form-control" rows="4" placeholder="127.0.0.1   localhost"></textarea>
                  </div>
                  <div class="form-group">
                    <label for="dynamicPart">想同步的部分 (在 host 文件中截取, 以行为单位)</label>
                    <textarea id="dynamicPart" class="form-control" rows="8" placeholder="1.2.3.4 &#10;central.github.com"></textarea>
                  </div>
                  <div class="form-group" id="info_box"></div>
                  <button id="submitBtn" class="btn btn-lg btn-primary btn-block">确定</button>
                </form>
              </div>
              <div class="tab-pane" id="panel-250047">
                <br/>
                <p>本站提供了同步域名的功能，要同步到您的 host 文件，有如下选择：</p>
                <br/>
                <h4>一、手动模式</h4>
                <br/>
                <p>1. 直接访问 同步URL 即可下载自动生成的 hosts 文件</p>
                <p>2. 备份好本地的 hosts 文件，然后直接用下载好的替换原有的 hosts 文件即可</p>
                <br/>
                <p>注：</p>
                <p>  Mac/Linux 下的 hosts 文件位置： /etc/hosts</p>
                <p>  Windows 下的 hosts 文件位置： C:\Windows\System32\drivers\etc\hosts</p>
                <br/>
                <h4>二、自动模式</h4>
                <br/>
                <p>强烈建议使用此方法，一次配置，永久自动更新</p>
                <br/>
                <p>1. 下载并安装 SwitchHosts：<a href="https://swh.app/zh/">SwitchHosts中文主页</a></p>
                <p>2. 进行如下简单配置</p>
                <p>
                  <img height="500px" src="https://lookoutldz.oss-cn-shenzhen.aliyuncs.com/blogs/synchosthelp.png" alt="loading..."/>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3 column">
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  $(document).ready(function () {

    $('#submitBtn').click(function () {
      $(this).attr('disabled','true');
      let configName = $('#configName').val()
      let staticPart = $('#staticPart').val()
      let dynamicPart = $('#dynamicPart').val()
      if (configName == null || configName.trim() === '') {
        msg_bar("请输入配置名", "warning")
        return
      }
      msg_bar("同步中，请稍等...", "warning")
      $.ajax({
        type : 'POST',
        url : '/host/' + configName,
        data : 'staticPart=' + staticPart + '&dynamicPart=' + dynamicPart,
        success : function (data) {
          if (getResultMap(data)) {
            msg_bar("同步成功, 请保存好您的同步URL: http://hk.lookoutldz.top:12345/host/" + configName, 'success')
            $('#submitBtn').removeAttr('disabled');
          } else {
            msg_bar(data.code + ' - ' + getErrorMap(data).message, 'danger');
            $('#submitBtn').removeAttr('disabled');
          }
        },
        error : function () {
          msg_bar('服务器罢工了, 请稍后再试...Σ(°Д°;', 'danger');
          $('#submitBtn').removeAttr('disabled');
        }
      })
    })
    // $('#configName')
    //         .focus(function (){
    //           $('#submitBtn').attr("disabled", "true")
    //         })
    //         .blur(function () {
    //           let configName = $('#configName').val()
    //           $.ajax({
    //             type: 'GET',
    //             url: '/check/' + configName,
    //             success: function (data) {
    //               let result = getResultMap(data)
    //               console.log(result)
    //               if (result !== true) {
    //                 msg_bar("这个配置名已经被使用!", "danger")
    //                 $('#configName').focus()
    //               } else {
    //                 $('#info_box').empty()
    //                 $('#submitBtn').removeAttr('disabled')
    //               }
    //             },
    //             error: function (data) {
    //               console.log("error: " + getErrorMap(data))
    //             }
    //           })
    //         })
  })

  function msg_bar(msg, alarmLevel) {
    //alarmLevel = danger / warning / info / success
    let displayMsg = $('<div style="text-align: center" class="alert alert-' + alarmLevel + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + msg + '</div>')
    $('#info_box').empty().append(displayMsg)
  }

  function getResultMap(data) {
    if(data.code === 200) {
      return data.resultMap
    } else {
      // todo
      return null
    }
  }

  function getErrorMap(data) {
    if(data.code !== 200) {
      return data.errorMap
    } else {
      return null
    }
  }

</script>
</body>
</html>